<template>
  <BorderBox>
    <template v-slot:title_l>

      <div class="chart-title" v-if="title">{{ title }}</div>
      <slot name="title" v-if="!title && $slots.title"></slot>
      <template v-else>
        <slot></slot>
      </template>
    </template>
    <template v-slot:title_r>

      <IconDatePicker @on-change="timeChange" :timeInfo="timeInfo" />
    </template>
    <!-- <div class="flex-spb-center">
    </div> -->
    <template v-slot:main_info>

      <Chart :option="option" ref="chartRef" :height="height" class="custom-chart" />
    </template>
  </BorderBox>
</template>

<script setup>
import { onMounted, watch, ref } from 'vue';
import Chart from '../Charts'
import BorderBox from '../BorderBox'
import IconDatePicker from '../ChartWithPicker/IconDatePicker.vue'
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  },
  option: {
    type: Object,
    default: () => ({})
  },
  height: {
    type: [Number, String],
    default: '250px'
  },
  title: String,
})
// console.log(props.height, 'heioght');

const emits = defineEmits(['on-filter', 'on-time-refresh'])
const chartRef = ref()
const timeInfo = ref()
let seriesName = []
watch(() => props.params, (newV) => {
  // console.log(newV, 'newV');
  if (newV) {
    timeInfo.value = {
      from: newV.from,
      to: newV.to
    }

  }

})
onMounted(() => {
  bindChartMouseMove()
  window.addEventListener('resize', () => {

    chartRef.value?.echartInstance?.resize()
  })
})
const bindChartMouseMove = () => {
  const target = chartRef.value?.echartInstance?.getDom()
  target && (target.onmousemove = onChartMouseMove);
}
const onChartMouseMove = () => {
  if (!seriesName?.length) {
    seriesName = document.getElementsByClassName("seriesName") || [];
  }
  // console.log(filterUrl, "filterUrl");

  for (let i = 0; i < seriesName.length; i++) {
    seriesName[i].onclick = seriesNameClick;
  }
}
const seriesNameClick = (e) => {
  const url = e.target.getAttribute("data-value");
  emits('on-filter', url);

};
const timeChange = (time) => {
  const params = {
    ...props.params,
    from: time.from,
    to: time.to,
  };

  timeInfo.value = { from: time.from, to: time.to }
  emits('on-time-refresh', params);
};
watch(() => props.option, (newV) => {

  chartRef.value?.echartInstance?.setOption(newV)
  bindChartMouseMove()
})
</script>

<style scoped lang="scss"></style>
